<!--出货单管理-->
<template>
  <div class="delivery_box">
    <div class="left">
      <div class="left_item" :class="{active:activeIndex===0}"  @click="scrollTo(0)">第一章</div>
      <div class="left_item" :class="{active:activeIndex===1}"  @click="scrollTo(1)">第二章</div>
      <div class="left_item" :class="{active:activeIndex===2}"  @click="scrollTo(2)">第三章</div>
      <div class="left_item" :class="{active:activeIndex===3}"  @click="scrollTo(3)">第四章</div>
    </div>
    <div style="overflow: hidden;">
    <div class="content">
      <div>
        第一张
        JavaScript可以获取浏览器提供的很多对象，并进行操作。
        window
        window对象不但充当全局作用域，而且表示浏览器窗口。
        window对象有innerWidth和innerHeight属性，可以获取浏览器窗口的内部宽度和高度。内部宽高是指除去菜单栏、工具栏、边框等占位元素后，用于显示网页的净宽高。
      </div>
      <div>
        第二张
        对应的，还有一个outerWidth和outerHeight属性，可以获取浏览器窗口的整个宽高。
        navigator
        navigator对象表示浏览器的信息，最常用的属性包括：
        navigator.appName：浏览器名称；
        navigator.appVersion：浏览器版本；
        navigator.language：浏览器设置的语言；
        navigator.platform：操作系统类型；
        navigator.userAgent：浏览器设定的User-Agent字符串。
      </div>
      <div>
        第三张
        请注意，navigator的信息可以很容易地被用户修改，所以JavaScript读取的值不一定是正确的。很多初学者为了针对不同浏览器编写不同的代码，喜欢用if判断浏览器版本，例如：
        var width
        if (getIEVersion(navigator.userAgent)  9) {
        width = document.body.clientWidth;
        } else {
        width = window.innerWidth;
        }
        但这样既可能判断不准确，也很难维护代码。正确的方法是充分利用JavaScript对不存在属性返回undefined的特性，直接用短路运算符||计算：
        var width = window.innerWidth || document.body.clientWidth;
        screen
        screen对象表示屏幕的信息，常用的属性有：
        screen.width：屏幕宽度，以像素为单位；
        screen.height：屏幕高度，以像素为单位；
        screen.colorDepth：返回颜色位数，如8、16、24。
      </div>
      <div>
        第四张
        location对象表示当前页面的URL信息。例如，一个完整的URL：
        http://www.example.com:8080/path/index.html?a=1&b=2#TOP
        可以用location.href获取。要获得URL各个部分的值，可以这么写：
        location.protocol; // 'http'
        location.host; // 'www.example.com'
        location.port; // '8080'
        location.pathname; // '/path/index.html'
        location.search; // '?a=1&b=2'
        location.hash; // 'TOP'
        要加载一个新页面，可以调用location.assign()。如果要重新加载当前页面，调用location.reload()方法非常方便。
      </div>
    </div>
    </div>
  </div>
</template>
<script>
  export default {
    data () {
      return {
        activeIndex: 0
      }
    },
    mounted() {
      window.addEventListener('scroll',this.onScroll)
    },
    methods: {
      // 点击跳转
      goToArticle(index) {
        if (this.activeIndex !== index) {
          this.activeIndex = index;
        } else {
          return false;
        }
      },
      // 滚动监听器
      onScroll() {
        // 获取所有锚点元素
        const navContents = document.querySelectorAll('.content div')
        // 所有锚点元素的 offsetTop
        const offsetTopArr = []
        navContents.forEach(item => {
          offsetTopArr.push(item.offsetTop)
        })
        // 获取当前文档流的 scrollTop
        const scrollTop = document.querySelectorAll('.content').scrollTop || document.querySelectorAll('.content').scrollTop
        // 定义当前点亮的导航下标
        let navIndex = 0
        for (let n = 0; n < offsetTopArr.length; n++) {
          // 如果 scrollTop 大于等于第n个元素的 offsetTop 则说明 n-1 的内容已经完全不可见
          // 那么此时导航索引就应该是n了
          if (scrollTop >= offsetTopArr[n]) {
            navIndex = n
          }
        }
        this.activeIndex = navIndex
      },
      // 跳转到指定索引的元素
      scrollTo(index) {
        // 获取目标的 offsetTop
        // css选择器是从 1 开始计数，我们是从 0 开始，所以要 +1
        const targetOffsetTop = document.querySelector(`.content div:nth-child(${index + 1})`).offsetTop
        // 获取当前 offsetTop
        const target = document.querySelector('.content')
        let scrollTop = target.scrollTop || target.scrollTop
        console.log(targetOffsetTop)
        console.log(scrollTop)
        // 定义一次跳 50 个像素，数字越大跳得越快，但是会有掉帧得感觉，步子迈大了会扯到蛋
        const STEP = 50
        // 判断是往下滑还是往上滑
        if (scrollTop > targetOffsetTop) {
          // 往上滑
          smoothUp()
        } else {
          // 往下滑
          smoothDown()
        }
        // 定义往下滑函数
        function smoothDown() {
          console.log('距父',scrollTop,'',targetOffsetTop)
          // const target = document.querySelector('.content')
          console.log('滚公调',target.scrollTop)
          // 如果当前 scrollTop 小于 targetOffsetTop 说明视口还没滑到指定位置
          if (scrollTop < targetOffsetTop) {
            // 如果和目标相差距离大于等于 STEP 就跳 STEP
            // 否则直接跳到目标点，目标是为了防止跳过了。
            if (targetOffsetTop - scrollTop >= STEP) {
              scrollTop += STEP
            } else {
              scrollTop = targetOffsetTop
            }
            target.scrollTop = scrollTop
            // document.documentElement.scrollTop = scrollTop
            // 关于 requestAnimationFrame 可以自己查一下，在这种场景下，相比 setInterval 性价比更高
            requestAnimationFrame(smoothDown)
          }
        }
        // 定义往上滑函数
        function smoothUp() {
          if (scrollTop > targetOffsetTop) {
            if (scrollTop - targetOffsetTop >= STEP) {
              scrollTop -= STEP
            } else {
              scrollTop = targetOffsetTop
            }
            target.scrollTop = scrollTop
            // document.documentElement.scrollTop = scrollTop
            requestAnimationFrame(smoothUp)
          }
        }
        this.activeIndex = index
      }
    },
    destroyed() {
      window.removeEventListener('scroll', this.onScroll)
    }
  }
</script>
<style scoped>
  .delivery_box{
    display: grid;
    grid-template-columns: 100px auto;
    position: relative;
  }
  .left{
    width: 100px;
    font-size: 14px;
    border-left: 2px solid #a6a5a5;
    /*background-color: #840000;*/
  }
  .left_item{
    width: 100%;
    height: 35px;
    border-left: 4px solid #ffffff;
    padding: 5px;
    cursor: pointer;
  }
  .content{
    position: relative;
    background-color: #1acacc;
    font-size: 18px;
    overflow-y: auto;
    height: calc(100vh - 135px);
    /*overflow: hidden;*/
  }
  .content div{
    position: relative;
    height: 400px;
    padding: 10px;
  }
  .active{
    border-left: 4px solid #ef0404;
  }
</style>
